<template>
  <div class="product-search-container">
    <el-form
      :model="searchForm"
      :inline="true"
      class="search-form"
      @submit.prevent="handleSearch"
    >
      <el-form-item label="产品编号" prop="productCode">
        <el-input
          v-model="searchForm.productCode"
          placeholder="请输入产品编号"
          clearable
          style="width: 200px"
          @keyup.enter="handleSearch"
        />
      </el-form-item>
      
      <el-form-item label="产品名称" prop="productName">
        <el-input
          v-model="searchForm.productName"
          placeholder="请输入产品名称"
          clearable
          style="width: 200px"
          @keyup.enter="handleSearch"
        />
      </el-form-item>

      <el-form-item label="产品类别" prop="productType">
        <el-input
          v-model="searchForm.productType"
          placeholder="请输入产品类别"
          clearable
          style="width: 200px"
          @keyup.enter="handleSearch"
        />
      </el-form-item>
      
      <el-form-item>
        <el-button
          type="primary"
          :icon="Search"
          @click="handleSearch"
          :loading="loading"
        >
          搜索
        </el-button>
        <el-button
          :icon="Refresh"
          @click="handleReset"
        >
          重置
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { Search, Refresh } from '@element-plus/icons-vue'

export default {
  name: 'ProductSearchComponent',
  props: {
    /** 加载状态 */
    loading: {
      type: Boolean,
      default: false
    }
  },
  emits: ['search', 'reset'],
  setup(props, { emit }) {
    const searchForm = reactive({
      productCode: '',
      productName: '',
      productType: '',
      priority: '',
      status: ''
    })

    // 处理搜索
    const handleSearch = () => {
      const searchParams = {
        productCode: searchForm.productCode?.trim() || undefined, // 后端使用 productCode
        productName: searchForm.productName?.trim() || undefined,
        productType: searchForm.productType?.trim() || undefined,
      }
      emit('search', searchParams)
    }

    // 处理重置
    const handleReset = () => {
      searchForm.productCode = ''
      searchForm.productName = ''
      searchForm.productType = ''
      emit('reset')
    }

    return {
      searchForm,
      handleSearch,
      handleReset,
      Search,
      Refresh
    }
  }
}
</script>

<style scoped>
.product-search-container {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #e9ecef;
}

.search-form {
  margin: 0;
}

.search-form :deep(.el-form-item) {
  margin-bottom: 0;
  margin-right: 20px;
}

.search-form :deep(.el-form-item__label) {
  color: #714B67;
  font-weight: 600;
  font-size: 14px;
}

.search-form :deep(.el-input__inner) {
  border-color: #dcdfe6;
  color: #606266;
}

.search-form :deep(.el-input__inner:focus) {
  border-color: #017fa5;
  box-shadow: 0 0 0 2px rgba(1, 127, 165, 0.1);
}

.search-form :deep(.el-button--primary) {
  background-color: #017fa5;
  border-color: #017fa5;
  color: #ffffff;
}

.search-form :deep(.el-button--primary:hover) {
  background-color: #015f7a;
  border-color: #015f7a;
}

.search-form :deep(.el-button--primary:focus) {
  background-color: #017fa5;
  border-color: #017fa5;
}

.search-form :deep(.el-button) {
  color: #714B67;
  border-color: #dcdfe6;
  background-color: #ffffff;
}

.search-form :deep(.el-button:hover) {
  color: #017fa5;
  border-color: #017fa5;
  background-color: #f0f9ff;
}

.search-form :deep(.el-button:focus) {
  color: #714B67;
  border-color: #dcdfe6;
  background-color: #ffffff;
}
</style>
